<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>供应商报表</title>
<meta name="decorator" content="default" />

<script src="${ctxStatic}/Highcharts-4.2.5/js/modules/exporting.js" type="text/javascript"></script>
<script src="${ctxStatic}/Highcharts-4.2.5/js/highcharts.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
	var chart;
	var pageNoOne;
	var pageSizeOne;
	var countOne;
	var pageNoTwo;
	var pageSizeTwo;
	var countTwo;
	var date = 30;
	$(document).ready(function() {
				chart = new Highcharts.Chart({
					//常规图表选项设置
					chart : {
						renderTo : 'ampieDIV', //在哪个区域呈现，对应HTML中的一个元素ID
						plotBackgroundColor : null, //绘图区的背景颜色
						plotBorderWidth : null, //绘图区边框宽度
						plotShadow : false
					//绘图区是否显示阴影            
					},
					//图表的主标题
					title : {
						text : ''
					},
					//当鼠标经过时的提示设置
					tooltip : {
						pointFormat : '{series.name}: <b>{point.y}</b>',
						percentageDecimals : 1
					},
					//每种图表类型属性设置
					plotOptions : {
						//饼状图
						pie : {
							allowPointSelect : true,
							cursor : 'pointer',
							dataLabels : {
								enabled : true,
								color : '#000000',
								connectorColor : '#000000',
								formatter : function() {
									//Highcharts.numberFormat(this.percentage,2)格式化数字，保留2位精度
									return '<b>'+this.point.name +'</b>: '+Highcharts.numberFormat(this.percentage, 2)+' %';
								}
							},
							/*是否显示图例*/
							showInLegend : true
						}
					},
					//图表要展现的数据
					series : [{type : 'pie',name : '订单数'}]
				});
				//隐藏
				$("text[text-anchor = 'end']").css("display", "none");
				
				//One下一页
				$("#nextPage").click(function(){
					if(pageNoOne < countOne/pageSizeOne){
						//定义一个数组
						browsers = [];
						$("#customerList").html("");
						$.getJSON("${ctx}/pro/supplierReport/pieList","pageNo="+(pageNoOne+1)+"&day="+date,function(data){
							$.each(data.list, function(i,info){
								 var newRow=  "<tr><td>"+(i+1)+
							 	 "</td><td>"+info.name+
								 "</td><td>"+info.remarks+
								 "</td><td>"+info.share+
								 "</td></tr>";
								$("#customerList").append(newRow);
								browsers.push([ info.name, info.share ]);
							});
							chart.series[0].setData(browsers);
							pageNoOne = data.pageNo;
							pageSizeOne = data.pageSize;
							countOne = data.count;
							$("#pageNoOne").val(pageNoOne);
							$("#pageSizeOne").val(pageSizeOne);
							$("#countOne").text(countOne);
							$("#previousPageLi").attr("class","");
							if(pageNoOne >= countOne/pageSizeOne){
								$("#nextPageLi").attr("class","disabled");
							}
						});
					}
				});
				
				//One上一页
				$("#previousPage").click(function(){
					if(pageNoOne > 1){
						//定义一个数组
						browsers = [];
						$("#customerList").html("");
						$.getJSON("${ctx}/pro/supplierReport/pieList","pageNo="+(pageNoOne-1)+"&day="+date,function(data){
							$.each(data.list, function(i,info){
								 var newRow=  "<tr><td>"+(i+1)+
							 	 "</td><td>"+info.name+
								 "</td><td>"+info.remarks+
								 "</td><td>"+info.share+
								 "</td></tr>";
								$("#customerList").append(newRow);
								browsers.push([ info.name, info.share ]);
							});
							chart.series[0].setData(browsers);
							pageNoOne = data.pageNo;
							pageSizeOne = data.pageSize;
							countOne = data.count;
							$("#pageNoOne").val(pageNoOne);
							$("#pageSizeOne").val(pageSizeOne);
							$("#countOne").text(countOne);
							$("#nextPageLi").attr("class","");
							if(pageNoOne <= 1){
								$("#previousPageLi").attr("class","disabled");
							}
						});
					}
				});
				
				//Two下一页
				$("#nextPageTwo").click(function(){
					if(pageNoTwo < countTwo/pageSizeTwo){
						$("#customerListTwo").html("");
						$.getJSON("${ctx}/pro/supplierReport/allList","pageNo="+(pageNoTwo+1)+"&day="+date,function(data){
							$.each(data.list, function(i,info){
								 var newRow= "<tr><td>"+info.name+
								 "</td><td>"+info.phone+
								 "</td><td>"+info.fax+
								 "</td><td>"+info.email+
								 "</td><td>"+info.address+
								 "</td><td>"+info.website+
								 "</td><td>"+info.remarks+
								 "</td><td>"+info.share+
								 "</td></tr>";
								$("#customerListTwo").append(newRow);
							});
							pageNoTwo = data.pageNo;
							pageSizeTwo = data.pageSize;
							countTwo = data.count;
							$("#pageNoTwo").val(pageNoTwo);
							$("#pageSizeTwo").val(pageSizeTwo);
							$("#countTwo").text(countTwo);
							$("#previousPageLiTwo").attr("class","");
							if(pageNoTwo >= countTwo/pageSizeTwo){
								$("#nextPageLiTwo").attr("class","disabled");
							}
						});
					}
				});
				
				//Two上一页
				$("#previousPageTwo").click(function(){
					if(pageNoTwo > 1){
						$("#customerListTwo").html("");
						$.getJSON("${ctx}/pro/supplierReport/allList","pageNo="+(pageNoTwo-1)+"&day="+date,function(data){
							$.each(data.list, function(i,info){
								 var newRow= "<tr><td>"+info.name+
								 "</td><td>"+info.phone+
								 "</td><td>"+info.fax+
								 "</td><td>"+info.email+
								 "</td><td>"+info.address+
								 "</td><td>"+info.website+
								 "</td><td>"+info.remarks+
								 "</td><td>"+info.share+
								 "</td></tr>";
								$("#customerListTwo").append(newRow);
							});
							pageNoTwo = data.pageNo;
							pageSizeTwo = data.pageSize;
							countTwo = data.count;
							$("#pageNoTwo").val(pageNoTwo);
							$("#pageSizeTwo").val(pageSizeTwo);
							$("#countTwo").text(countTwo);
							$("#nextPageLiTwo").attr("class","");
							if(pageNoTwo <= 1){
								$("#previousPageLiTwo").attr("class","disabled");
							}
						});
					}
				});
				
				//历史
				$("#history").click(function(){pie(0)});
				//近60天
				$("#sixty").click(function(){pie(60)});
				//近30天
				$("#thirty").click(function(){pie(30)});
				//近10天
				$("#ten").click(function(){pie(10)});
			});
	//按日期
	function pie(day){
		//获取One表格数据
		$.getJSON("${ctx}/pro/supplierReport/pieList","day="+day,function(data){
			//定义一个数组
			browsers = [];
			$("#customerList").html("");
			$.each(data.list, function(i,info){
				 var newRow= "<tr><td>"+(i+1)+
			 	 "</td><td>"+info.name+
				 "</td><td>"+info.remarks+
				 "</td><td>"+info.share+
				 "</td></tr>";
				$("#customerList").append(newRow);
				browsers.push([ info.name, info.share ]);
			});
			chart.series[0].setData(browsers);
			$("#previousPageLi").attr("class","disabled");
			pageNoOne = data.pageNo;
			pageSizeOne = data.pageSize;
			countOne = data.count;
			$("#pageNoOne").val(pageNoOne);
			$("#pageSizeOne").val(pageSizeOne);
			$("#countOne").text(countOne);
			if(countOne/pageSizeOne <= 1){
				$("#nextPageLi").attr("class","disabled");
			}
		});
		//获取Two表格数据
		$.getJSON("${ctx}/pro/supplierReport/allList","day="+day,function(data){
			$("#customerListTwo").html("");
			$.each(data.list, function(i,info){
				 var newRow= "<tr><td>"+info.name+
				 "</td><td>"+info.phone+
				 "</td><td>"+info.fax+
				 "</td><td>"+info.email+
				 "</td><td>"+info.address+
				 "</td><td>"+info.website+
				 "</td><td>"+info.remarks+
				 "</td><td>"+info.share+
				 "</td></tr>";
				$("#customerListTwo").append(newRow);
			});
			$("#previousPageLiTwo").attr("class","disabled");
			pageNoTwo = data.pageNo;
			pageSizeTwo = data.pageSize;
			countTwo = data.count;
			$("#pageNoTwo").val(pageNoTwo);
			$("#pageSizeTwo").val(pageSizeTwo);
			$("#countTwo").text(countTwo);
			if(countTwo/pageSizeTwo <= 1){
				$("#nextPageLiTwo").attr("class","disabled");
			}
		});
		date = day;
	}	
	
	//页面加载时获取饼图数据
	$.getJSON("${ctx}/pro/supplierReport/pie","day="+date,function(data){
		//定义一个数组
		browsers = [],
		//迭代，把异步获取的数据放到数组中
		$.each(data, function(i, d) {
			browsers.push([ d.name, d.share ]);
		});
		//设置数据
		chart.series[0].setData(browsers);
	});
	
	//页面加载时获取One表格数据
	$.getJSON("${ctx}/pro/supplierReport/pieList","day="+date,function(data){
		//定义一个数组
		browsers = [];
		$("#customerList").html("");
		$.each(data.list, function(i,info){
			 var newRow= "<tr><td>"+(i+1)+
		 	 "</td><td>"+info.name+
			 "</td><td>"+info.remarks+
			 "</td><td>"+info.share+
			 "</td></tr>";
			$("#customerList").append(newRow);
			browsers.push([ info.name, info.share ]);
		});
		chart.series[0].setData(browsers);
		$("#previousPageLi").attr("class","disabled");
		pageNoOne = data.pageNo;
		pageSizeOne = data.pageSize;
		countOne = data.count;
		$("#pageNoOne").val(pageNoOne);
		$("#pageSizeOne").val(pageSizeOne);
		$("#countOne").text(countOne);
		if(countTwo/pageSizeTwo <= 1){
			$("#nextPageLi").attr("class","disabled");
		}
	});
	
	//页面加载时获取Two表格数据
	$.getJSON("${ctx}/pro/supplierReport/allList","day="+date,function(data){
		$("#customerListTwo").html("");
		$.each(data.list, function(i,info){
			 var newRow= "<tr><td>"+info.name+
			 "</td><td>"+info.phone+
			 "</td><td>"+info.fax+
			 "</td><td>"+info.email+
			 "</td><td>"+info.address+
			 "</td><td>"+info.website+
			 "</td><td>"+info.remarks+
			 "</td><td>"+info.share+
			 "</td></tr>";
			$("#customerListTwo").append(newRow);
		});
		$("#previousPageLiTwo").attr("class","disabled");
		pageNoTwo = data.pageNo;
		pageSizeTwo = data.pageSize;
		countTwo = data.count;
		$("#pageNoTwo").val(pageNoTwo);
		$("#pageSizeTwo").val(pageSizeTwo);
		$("#countTwo").text(countTwo);
		if(countTwo/pageSizeTwo <= 1){
			$("#nextPageLiTwo").attr("class","disabled");
		}
	});
	
	
});	
</script>
<!-- 圆饼图形样式 -->
<style type="text/css">
g.highcharts-button {
	display: none;
}
</style>

</head>
<body class="fixed-top">
<sys:message content="${message}"/>
	<div id="body">
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="">
					<div class="tabbable tabbable-custom boxless" >
						<ul class="nav nav-tabs" id="liStatusGroup">
							<li><a id="ten" href="javascript:void(0)"  data-toggle="tab">近10天</a></li>
							<li class="active"><a id="thirty" href="javascript:void(0)" data-toggle="tab">近30天</a></li>
							<li><a id="sixty" href="javascript:void(0)" data-toggle="tab">近60天</a></li>
							<li><a id="history" href="javascript:void(0)"data-toggle="tab">历史>></a></li>
						</ul>
						<div class="tab-content">
							<div class="widget-body">
								<div class="clearfix margin-bottom-10" style="height: 450px;overflow: hidden;" >
									<div class="span6">
										<div class="widget">
											<div class="widget-title">
												<h4>
													<i class="icon-reorder"></i> 供应商报表
												</h4>
											</div>
											<div class="widget-body">
												<table class="table tablesorter table-striped table-bordered table-condensed" style="margin-top: 10px;">
													<thead>
														<tr>
															<th>排名</th>
															<th>供应商名称</th>
															<th>描述</th>
															<th>订单数</th>
														</tr>
													</thead>
													<tbody id="customerList">
													</tbody>
												</table>
												<div class="pagination">
													<ul>
														<li id="previousPageLi"><a id="previousPage" href="javascript:">&#171;上一页</a></li>
														<li id="nextPageLi"><a id="nextPage" href="javascript:">下一页&#187;</a></li>
														<li class="disabled controls">
														<a>当前<input type="text" id="pageNoOne"/> / 
														<input type="text" id="pageSizeOne"/>条，共<span id="countOne"></span> 条</a>
														</li>
													</ul>
												</div>

											</div>
										</div>
									</div>
									<div class="span6">
										<div class="widget">
											<div class="widget-title">
												<h4>
													<i class="icon-reorder"></i> 供应商报表饼图
												</h4>
											</div>
											<div class="widget-body">
												<div class="row-fluid" id="ampieDIV"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span12">
						<div class="widget">
							<div class="widget-body">
								<table class="table tablesorter table-striped table-bordered table-condensed">
									<thead>
										<tr>
											<th>供应商名称</th>
											<th>电话</th>
											<th>传真</th>
											<th>邮箱</th>
											<th>地址</th>
											<th>网址</th>
											<th>描述</th>
											<th>订单数</th>
										</tr>
									</thead>
									<tbody id="customerListTwo">
									</tbody>
								</table>
								<div class="pagination">
									<ul>
										<li id="previousPageLiTwo"><a id="previousPageTwo" href="javascript:">&#171;上一页</a></li>
										<li id="nextPageLiTwo"><a id="nextPageTwo" href="javascript:">下一页&#187;</a></li>
										<li class="disabled controls"><a>当前<input type="text"
												id="pageNoTwo" /> / <input type="text" id="pageSizeTwo" />条，共<span
												id="countTwo"></span> 条
										</a></li>
									</ul>
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
